<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设备管理巡检表单-frame</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        [v-cloak] {
            display: none;
        }

        .equipment-wrapper {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .equipment-wrapper>div:nth-child(1) {
            width: 0%;
        }

        .equipment-wrapper>div:nth-child(2) {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
        }

        .aui-list-item-label>input,
        .aui-list-item-label>span {
            margin-left: 5px;
        }

        .multi-col-3-wrapper {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            padding: 10px 0;
        }

        .multi-col-3-wrapper>div:nth-child(1) {
            width: 20%;
            position: relative;
        }

        .multi-col-3-wrapper>div:nth-child(1)>span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            display: block;
            width: 50px;
        }

        .multi-col-3-wrapper>div:nth-child(2) {
            width: 45%;
        }

        .multi-col-3-wrapper>div:nth-child(2)>p:nth-child(1) {
            height: 40px;
            line-height: 40px;
        }

        .multi-col-3-wrapper>div:nth-child(2)>p:nth-child(2) {
            height: 40px;
            line-height: 40px;
        }

        .multi-col-3-wrapper>div:nth-child(2)>p:nth-child(3) {
            height: 20px;
            line-height: 20px;
        }

        .multi-col-3-wrapper>div:nth-child(3) {
            width: 30%;
        }

        .multi-col-3-wrapper>div:nth-child(3)>p {
            height: 20px;
            line-height: 20px;
        }

        .multi-col-3-wrapper>div:nth-child(4) {
            width: 20%;
        }

        .multi-col-3-wrapper>div:nth-child(4)>p {
            height: 20px;
            line-height: 20px;
        }

        .equipment-desc-wrapper {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            padding: 10px 0;
        }

        .equipment-desc-wrapper>div:nth-child(1) {
            width: 20%;
            position: relative;
        }

        .equipment-desc-wrapper>div:nth-child(1)>span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .equipment-desc-wrapper>div:nth-child(2) {
            width: 80%;
            color: #888;
        }

        .aui-border-t:before,
        .aui-border-t::after,
        .aui-list:before,
        .aui-list:after {
            display: none;
        }

        #app {
            width: 95%;
            margin: 0 auto;
        }

        .aui-list .aui-list-item-label,
        .aui-list .aui-list-item-label-icon {
            width: 20%;
        }

        .main-wrapper {
            width: 100%;
        }

        .main-wrapper>.top-header {
            text-align: center;
        }

        .main-wrapper>.top-nav,
        .top-middle {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .main-wrapper>.top-nav>div {
            width: 33%;
            text-align: center;
            font-size: 16px;
        }

        .main-wrapper>.top-middle>div {
            width: 20%;
            font-size: 14px;
            text-align: center;
        }

        .main-wrapper>.top-content {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .main-wrapper>.top-content>div {
            width: 20%;
            font-size: 14px;
            text-align: center;
        }

        .main-wrapper>div {
            height: 30px;
            line-height: 30px;
            margin: 10px auto;
        }

        .textarea-container {
            width: 100%;
            margin: 0 auto;
        }

        .textarea-container>div:nth-child(1) {
            text-align: center;
            font-size: 17px;
        }

        .textarea-container>div:nth-child(2) {
            padding: 10px;
        }

        .aui-list-header {
            padding: 5px 0;
        }

        .aui-list-header {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .aui-list-header>span:nth-child(1) {
            width: 20%;
        }

        .aui-list-header>span:nth-child(2) {
            width: 80%;
        }

        .aui-list-header>span:nth-child(2)>input {
            border: 1px solid #000;
        }

        .aui-form-list-wrapper,
        .aui-form-list-info-wrapper {
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin: 10px 0;
        }

        .aui-form-list-wrapper>li,
        .aui-form-list-info-wrapper>li {
            width: 50%;
        }

        .aui-list-item-label {
            width: 100% !important;
            font-size: 16px;
        }

        .aui-list-item-input {
            font-size: 16px;
        }

        .aui-list-item-input>input::-webkit-input-placeholder {
            font-size: 16px;
        }

        .aui-input-wrapper {
            position: relative;
            top: -20px;
        }

        .aui-input-wrapper>input {
            margin: 0 auto;
            width: 100px;
            display: block;
            text-align: center;
        }

        .textarea-wrapper {
            min-height: 100px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            width: 97%;
            margin: 20px auto 5px auto;
            border-radius: 5px;
        }

        .submit-btn-bottom {
            font-size: 16px;
            margin: 30px auto;
            text-align: center;
        }

        .submit-btn-bottom>button {
            border: none;
            outline: none;
            background-color: #0064B0;
            height: 50px;
            width: 150px;
            color: #fff;
        }
    </style>
</head>

<body>
    <main id="app">
        <div class="equipment-wrapper">
            <div>时间轴</div>
            <div class="aui-card-list">
                <div class="aui-content aui-margin-b-15">
                    <ul class="aui-list aui-form-list aui-form-list-wrapper">
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    日期
                                </div>
                                <div class="aui-list-item-input" id="F_InsTime" onclick="getDateTime()">
                                    {{getDateTime}}
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    次数：
                                </div>
                                <div class="aui-list-item-input">
                                    <input type="number" id="F_InsFre" placeholder="次数">
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    供气压力：
                                </div>
                                <div class="aui-list-item-input">
                                    <select id="F_SupplyPre">
                                        <option value="1">✔</option>
                                        <option value="0">✖</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    供氧压力：
                                </div>
                                <div class="aui-list-item-input">
                                    <select id="F_OxygenPre">
                                        <option value="1">✔</option>
                                        <option value="0">✖</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    电气系统：
                                </div>
                                <div class="aui-list-item-input">
                                    <select id="F_EleSys">
                                        <option value="1">✔</option>
                                        <option value="0">✖</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    加减压系统：
                                </div>
                                <div class="aui-list-item-input">
                                    <select id="F_PlusRedeSys">
                                        <option value="1">✔</option>
                                        <option value="0">✖</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    供排氧系统：
                                </div>
                                <div class="aui-list-item-input">
                                    <select id="F_ForRowSys">
                                        <option value="1">✔</option>
                                        <option value="0">✖</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    签名：
                                </div>
                                <div class="aui-list-item-input">
                                    <select id="F_InsRecordSign">
                                        <option v-for="(User, index) in Query_UserList"
                                            v-if="User.Permissions_Name == '技师'" :value="User.User_Id">
                                            {{User.User_Name}}</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="main-wrapper">
                    <div class="top-header" style="font-size: 18px;">
                        空气压缩机
                    </div>
                    <div class="top-nav">
                        <div>开机</div>
                        <div>关机</div>
                        <div>运行时间累计</div>
                    </div>
                    <div class="top-middle">
                        <div>温度</div>
                        <div>压力</div>
                        <div>温度</div>
                        <div>压力</div>
                        <div>运行时间累计</div>
                    </div>
                    <div class="top-content">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                            </div>
                            <div class="aui-list-item-input aui-input-wrapper">
                                <input type="text" id="F_StartTem" placeholder="温度">
                            </div>
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                            </div>
                            <div class="aui-list-item-input aui-input-wrapper">
                                <input type="text" id="F_StartPre" placeholder="压力">
                            </div>
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                            </div>
                            <div class="aui-list-item-input aui-input-wrapper">
                                <input type="text" id="F_ShuTem" placeholder="温度">
                            </div>
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                            </div>
                            <div class="aui-list-item-input aui-input-wrapper">
                                <input type="text" id="F_ShuPre" placeholder="压力">
                            </div>
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                            </div>
                            <div class="aui-list-item-input aui-input-wrapper">
                                <input type="text" id="F_CumuTime" placeholder="运行时间累计">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="textarea-container">
                    <div>故障及维修情况</div>
                    <div contenteditable="true" class="textarea-wrapper" id="F_RepSit">
                    </div>
                </div>
                <div class="submit-btn-bottom">
                    <button onclick="Insert_InspectRecord()">提交</button>
                </div>
            </div>
        </div>
    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../js/ToConfigure.js" charset="utf-8"></script>
<script src="../script/aui-toast.js" charset="utf-8"></script>
<script src="../script/aui-dialog.js" charset="utf-8"></script>
<script type="text/javascript">
    var vm = null;
    apiready = function () {
        vm = new Vue({
            el: '#app',
            data: {
                Query_UserList: [], //舱室操舱人员信息
                getDateTime: '选择日期'
            }, created() {
                //获取所属医院IP地址
                this.Url_IP = ToConfigure_IP("Gorgeous");

                //获取操作人员信息
                api.ajax({
                    url: this.Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_UserList',
                    method: 'get',
                    data: {
                        values: {
                        }
                    }
                }, function (ret, err) {
                    if (ret) {
                        //舱室操舱人员信息
                        vm.Query_UserList = ret;
                    } else {
                        var toast = new auiToast();
                        toast.fail({
                            title: "暂无技师信息",
                            duration: 2000
                        });
                    }
                });
            },
            methods: {

            }
        })
    }


    //谈话日期
    function getDateTime() {
        api.openPicker({
            type: 'date',
            date: getTime,
            title: '选择开始日期'
        }, function (ret, err) {
            if (ret) {
                vm.getDateTime = '' + ret.year +
                    '-' + ret.month +
                    '-' + ret.day
            }
        });
    }
    //获取年月日
    function getTime() {
        const now = new Date();
        const formattedDate = now.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        }).replace(/\//g, '-');

        return formattedDate;

    }


    //添加巡检信息
    function Insert_InspectRecord() {
        //获取参数
        var json = GetParameters();

        //获取所属医院IP
        var Url_IP = ToConfigure_IP("Gorgeous");
        api.ajax({
            url: Url_IP + 'EquipmentInspect/HO_InspectRecord/Insert_InspectRecord',
            method: 'post',
            data: {
                values: {
                    parms: json
                }
            },
            dataType: 'String',
        }, function (ret, err) {
            if (ret == "True") {
                JumpPage();
            } else {
                var toast = new auiToast();
                toast.fail({
                    title: "提交失败",
                    duration: 2000
                });
            }

        });
    }


    //跳转页面
    function JumpPage() {
        var dialog = new auiDialog();
        dialog.alert({
            title: "提示",
            msg: '操作成功，是否跳转设备巡检记录单',
            buttons: ['取消', '确定']
        }, function (ret) {
            if (ret.buttonIndex === 1) {

            } else if (ret.buttonIndex === 2) {

                api.historyBack({}, function (ret, err) {
                    if (!ret.status) {
                        api.closeWin();
                    }
                });

                api.sendEvent({
                    name: 'On_Site_Inspection',
                    extra: {
                        state: 'no'
                    }
                });
            }
        })
    }



    //获取参数添加巡检信息
    function GetParameters() {
        var JsParms = new Object();
        //巡检日期
        JsParms.F_InsTime = document.getElementById("F_InsTime").innerText;
        //巡检次数
        JsParms.F_InsFre = document.getElementById("F_InsFre").value;
        //供气压力
        JsParms.F_SupplyPre = document.getElementById("F_SupplyPre").value;
        //供氧压力
        JsParms.F_OxygenPre = document.getElementById("F_OxygenPre").value;
        //电力系统
        JsParms.F_EleSys = document.getElementById("F_EleSys").value;
        //加减压系统
        JsParms.F_PlusRedeSys = document.getElementById("F_PlusRedeSys").value;
        //供排氧系统
        JsParms.F_ForRowSys = document.getElementById("F_ForRowSys").value;
        //开机温度
        JsParms.F_StartTem = document.getElementById("F_StartTem").value;
        //开机压力
        JsParms.F_StartPre = document.getElementById("F_StartPre").value;
        //关机温度
        JsParms.F_ShuTem = document.getElementById("F_ShuTem").value;
        //关机压力
        JsParms.F_ShuPre = document.getElementById("F_ShuPre").value;
        //运行时间累积
        JsParms.F_CumuTime = document.getElementById("F_CumuTime").value;
        //故障及维修情况
        JsParms.F_RepSit = document.getElementById("F_RepSit").value;

        JsParms.F_InsRecordSign = document.getElementById("F_InsRecordSign").value;;
        return JSON.stringify(JsParms);

    }




</script>